<template>
	<van-nav-bar class="nav" :border='false' left-arrow @click-left="onClickLeft">
		<template #title>
			<p class="title"><slot></slot></p>
		</template>
	</van-nav-bar>
</template>

<script setup lang="ts">
	// 点击回到发现页面
	const onClickLeft = () => history.back();
</script>

<style lang="scss" scoped>
@import '@/common.scss';
	::v-deep.van-nav-bar__content {
		width: 100%;
		position: fixed;
		top: 0;
		left: 0;
		background: transparent;
		display: flex;
		align-items: center;
		height: var(--van-nav-bar-height);
	}
	::v-deep.van-ellipsis {
		overflow: visible !important;
	}
	.nav {
		--van-nav-bar-height: 88px;
		background-color: $background;
		--van-nav-bar-icon-color: #ffffff;
		--van-nav-bar-text-color: #ffffff;
		--van-nav-bar-title-text-color: #ffffff;
		--van-nav-bar-arrow-size: 36px;
		--van-nav-bar-title-font-size: 36px;
	
		.van-nav-bar__title {
			height: 88px;
		}
	
		.title {
			font-size: 36px;
			font-weight: 500;
		}
	}
</style>